<template>
<div id="el-menu-title">{{ isCollapse ? '后台' : '通用后台管理系统' }}</div>
<el-menu
active-text-color="#1e90ff"
background-color="#333"
text-color="#cfd2d9"
@select="handleSelect"
:collapse="isCollapse">
    <template v-for="item in menuData">
        <el-menu-item v-if="!item.children" :index="item.path" :key="item.path">
            <component class="icons" :is="item.Icon"></component>
            <template #title>{{ item.label }}</template>
        </el-menu-item>
        <el-sub-menu v-if="item.children" :index="item.path" :key="item.path">
            <template #title>
                <component class="icons" :is="item.Icon"></component>
                <span>{{ item.label }}</span>
            </template>
            <el-menu-item-group>
                <template #title>子菜单</template>
                <el-menu-item v-for="item2 in item.children" :key="item2.path" :index="item2.path">
                    <component class="icons" :is="item2.Icon"></component>
                    <template #title>{{ item2.label }}</template>
                </el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
    </template>
</el-menu>
</template>

<script>
import router from '../../router'
import store from '../../store'
import { defineComponent, reactive, toRefs, computed } from 'vue'
export default defineComponent({
    name: 'CommonAside',
    setup() {
        const menuData = computed(()=>{ // 侧边栏数据(根据路由配置动态生成)
            const routerdata = router.options.routes // 路由配置数据
            const Grade = store.state.user.userifo.Grade // 获取 vuex 的用户权限

            function fore(dataArray, pathstr){ // 循环递归提取路由配置数据的函数
                const data = []

                for (let i = 0; i < dataArray.length; i++) {
                    const GradeConfig = dataArray[i].meta.roles // 获取路由的权限配置
                    if(GradeConfig !== '*' && typeof GradeConfig.length === 'number' && GradeConfig.indexOf(Grade) === -1) continue // 权限校验

                    const datae = {}
                    datae.label = dataArray[i].meta.label
                    datae.Icon = dataArray[i].meta.Icon

                    datae.path = '/' + pathstr + '/' +dataArray[i].path // 拼接路径
                    datae.path = datae.path.replace(/(\/)(\1)+/g, '/') // 将 '/' 连续出现两次以上的地方替换成单个 '/'

                    if(dataArray[i].children){ // 如果有子路由则循环提取子路由数据
                        datae.children = fore(dataArray[i].children, datae.path)
                    }

                    data.push(datae)
                }

                return data
            }

            return fore(routerdata[0].children, '')
        })
        const handleSelect = (key)=>{
            router.push({
                path: key
            })
        }
        const data = reactive({
            menuData,
            isCollapse:computed(()=>store.state.Aside.isCollapse),
            handleSelect
        })
        return {
            ...toRefs(data),
        }
    },
})
</script>

<style scoped>
.icons{
    width: 20px;
    height: 20px;
}
#el-menu-title{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1e90ff;
}
</style>